<style>
</style>
<template>
    <ly-page>
        <ly-navi title="图片裁剪"></ly-navi>
        <ly-page-content>
            <el-form  label-width="125px" size="small">
                <el-form-item label="不限制裁剪模式" prop="pic">
                    <ly-cropper v-model="pic1" type="unlimited" class="horizontal-center" key="1"></ly-cropper>
                </el-form-item>
                <el-form-item label="锁定纵横比" prop="pic">
                    <ly-cropper v-model="pic2" type="lock" class="horizontal-center" :aspect-ratio="1 / 1" key="2"></ly-cropper>
                </el-form-item>
                <el-form-item label="固定裁剪模式" prop="pic">
                    <ly-cropper v-model="pic3" type="fixation" class="horizontal-center" :stencil-size="stencilSize" key="3"></ly-cropper>
                </el-form-item>
                <el-form-item label="圆形裁剪" prop="pic">
                    <ly-cropper v-model="pic4" type="circle" class="horizontal-center" key="4"></ly-cropper>
                </el-form-item>




                <ly-code-view>
                    <pre v-pre>
不限制裁剪模式
<ly-cropper v-model="pic1" type="unlimited" class="horizontal-center"></ly-cropper>
锁定纵横比
<ly-cropper v-model="pic2" type="lock" class="horizontal-center" :aspect-ratio="1 / 1"></ly-cropper>
固定裁剪模式
<ly-cropper v-model="pic3" type="fixation" class="horizontal-center" :stencil-size="{ width: 200, height: 200,}"></ly-cropper>
圆形裁剪
<ly-cropper v-model="pic4" type="circle" class="horizontal-center"></ly-cropper>
                    </pre>
                </ly-code-view>

                <ly-markdown>
                    <pre v-pre>
    ## `ly-cropper`
    ------
    
    #### Attributes
    
    | 属性名      | 说明                                                | 类型   | 可选值                                                       | 默认值                      |
    | ----------- | --------------------------------------------------- | ------ | ------------------------------------------------------------ | --------------------------- |
    | v-model     | 绑定的图片路径                                      | String | -                                                            | -                           |
    | type        | 裁剪模式                                            | String | unlimited：不限制裁剪模式；circle：圆；lock：锁定纵横比；fixation：固定 | unlimited                   |
    | aspectRatio | 矩形纵横比                                          | Number | -                                                            | 6 / 9                       |
    | boxSize     | 剪切容器大小                                        | Object | -                                                            | { width: 300, height: 300,} |
    | stencilSize | 裁剪框大小，仅在 固定模板尺寸(type: fixation)中生效 | Object | -                                                            | { width: 280, height: 280,} |    
                    </pre>
                </ly-markdown>
            </el-form>
        </ly-page-content>
    </ly-page>
</template>
<script>
Rap.define('', [], function () {
    return {
        data: function () {
            return {
                dialogVisible: false,
                type: 1,
                stencilSize: {
                    width: 200,
                    height: 200,
                },
                pic1: '',
                pic2: '',
                pic3: '',
                pic4: '',
            };
        },
    };
});
</script>